<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>点微博数据</title>
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <script include="jquery" src="./static/libs/include-lib-local.js"></script>
        <script include="mapv" src="./static/libs/include-cesium-local.js"></script>
        <!--引用示例页面样式表-->
        <link rel="stylesheet" href="./static/demo/cesium/style.css" />
    </head>

    <body>
        <div id="GlobeView"></div>
        <script>
            var webGlobe = new Cesium.WebSceneControl('GlobeView', {
                terrainExaggeration: 1
            });
            var blueImage = new Cesium.UrlTemplateImageryProvider({
                url: 'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}',
                tilingScheme: new Cesium.WebMercatorTilingScheme(),
                maximumLevel: 12
            });
            webGlobe.viewer.imageryLayers.addImageryProvider(blueImage);
            var map = webGlobe.viewer;

            initMap();
            initMapv();

            function initMap() {
                var center = Cesium.Cartesian3.fromDegrees(114, 30, 5000000.0);
                map.scene.camera.setView({
                    destination: center
                });
            }

            function initMapv() {
                $.get('./static/data/mapv/weibo.json', function (rs) {
                    console.log(rs);
                    var data1 = [];
                    var data2 = [];
                    var data3 = [];
                    var data4 = [];
                    for (var i = 0; i < rs[0].length; i++) {
                        var geoCoord = rs[0][i].geoCoord;
                        data1.push({
                            geometry: {
                                type: 'Point',
                                coordinates: geoCoord
                            }
                        });
                    }

                    for (var i = 0; i < rs[1].length; i++) {
                        var geoCoord = rs[1][i].geoCoord;
                        data2.push({
                            geometry: {
                                type: 'Point',
                                coordinates: geoCoord
                            },
                            time: Math.random() * 10
                        });
                    }

                    for (var i = 0; i < rs[2].length; i++) {
                        var geoCoord = rs[2][i].geoCoord;
                        data3.push({
                            geometry: {
                                type: 'Point',
                                coordinates: geoCoord
                            }
                        });
                    }
                    // 构建对应的dataset
                    var dataSet = new mapv.DataSet(data1);
                    // 设置对应的参数
                    // https://github.com/huiyan-fe/mapv/blob/master/API.md
                    var options = {
                        context: '2d', //cesium必须设置画布为2d
                        fillStyle: 'rgba(200, 200, 0, 0.8)',
                        bigData: 'Point',
                        size: 0.7,
                        draw: 'simple'
                    };
                    // 声明cesium的mapv图层并将其显示到三维球上
                    var mapvLayer1 = new CesiumZondy.Overlayer.MapvLayer(map, dataSet, options);

                    var dataSet = new mapv.DataSet(data2);
                    var options = {
                        context: '2d', //cesium必须设置画布为2d
                        fillStyle: 'rgba(255, 250, 0, 0.8)',
                        size: 0.7,
                        bigData: 'Point',
                        draw: 'simple'
                    };
                    var mapvLayer2 = new CesiumZondy.Overlayer.MapvLayer(map, dataSet, options);

                    var dataSet = new mapv.DataSet(data3);
                    var options = {
                        context: '2d', //cesium必须设置画布为2d
                        fillStyle: 'rgba(255, 250, 250, 0.6)',
                        size: 0.7,
                        bigData: 'Point',
                        draw: 'simple'
                    };
                    // 声明cesium的mapv图层并将其显示到三维球上
                    var mapvLayer3 = new CesiumZondy.Overlayer.MapvLayer(map, dataSet, options);

                    var dataSet = new mapv.DataSet(data2);
                    var options = {
                        context: '2d', //cesium必须设置画布为2d
                        fillStyle: 'rgba(255, 250, 250, 0.9)',
                        size: 1.1,
                        draw: 'simple',
                        bigData: 'Point',
                        animation: {
                            stepsRange: {
                                start: 0,
                                end: 10
                            },
                            trails: 1,
                            duration: 6
                        }
                    };
                    // 声明cesium的mapv图层并将其显示到三维球上
                    var mapvLayer4 = new CesiumZondy.Overlayer.MapvLayer(map, dataSet, options);
                    /* window.setTimeout(() => {
                        mapvLayer1.remove();
                        mapvLayer2.remove();
                        mapvLayer3.remove();
                        mapvLayer4.remove();
                    }, 5 * 1000); */
                });
            }
        </script>
    </body>
</html>
